import React, { PureComponent, PropTypes } from "react";
import {
    View,
    Text,
    Image,
    StyleSheet,
    Modal
} from "react-native";
import image from "../assets/image"
import InputVCode from "./inputVCode";
import WebpImageViewAndroid from "./WebpImageViewAndroid";


class confirm extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            visible:false
        }
    }

    static defaultProps ={
        title: "",
        canceText: "取消",
        sureText: "确定",
        inputIsVisible: false,
        closeIsVisible: false,
        hideLeftBtn: false,
        warnIsVisible: false,
    }

    cancelClick() {
        let { cancelClick } = this.props;
        if (cancelClick && typeof cancelClick === "function") {
            cancelClick();
        }
        this.setState({
            visible: false
        });
    }
    sureClick() {
        let { sureClick } = this.props;
        if (sureClick && typeof sureClick === "function") {
            sureClick();
        }
        this.setState({
            visible: false
        });
    }

    show() {
        this.setState({ visible: true })
    }

    hide() {
        this.setState({ visible: false })
    }

    render() {
        let {inputIsVisible,closeIsVisible,hideLeftBtn,warnIsVisible} = this.props;//整个提示框显示

        let input= inputIsVisible ?
           <View  style={{
            backgroundColor: '#fff',
            marginLeft:10,
            marginRight:10,
            marginBottom:15}}>
               <InputVCode />
            </View>: null;
        let leftBtn= hideLeftBtn ?null:
                <Text
                    style={[styles.btn, styles.grey]}
                    onStartShouldSetResponder={() => {
                        return true;
                    }}
                    onResponderGrant={this.sureClick.bind(this)}
                >
                    {this.props.sureText}
                </Text>;
        let line= hideLeftBtn ?null:
            <View style={styles.middleLine} />;

        let close= closeIsVisible ?
            <Image
                source={image.ic_close}
                style={styles.closeBtn}
                onStartShouldSetResponder={() => {
                    return true;
                }}
                onResponderGrant={this.cancelClick.bind(this)}/> : null;

        return (
            this.state.visible?
                <View style={{
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    zIndex: 999,
                    backgroundColor: 'rgba(0,0,0,0.5)',
                }}>
                    <Modal
                        transparent={true}
                        visible={this.state.visible}
                        onRequestClose={this.cancelClick.bind(this)}
                        animationType="none">

                        <View style={[styles.modalContainer,{ marginTop: 10}]}>
                            <View style={styles.modalCont}>

                                {this.props.title&&this.props.title !== ""? <View style={styles.title}>
                                    <Text style={{ textAlign: "center",fontWeight: "bold",fontSize: 20 ,marginTop:10}}>
                                        {warnIsVisible?<Image
                                            source={image.ic_invoice}
                                            style={{ width:25,height:25}}/>:null}

                                        {warnIsVisible? " ":null}
                                        {this.props.title}
                                    </Text>
                                    {close}
                                </View>:null}

                                <Text style={styles.context}>{this.props.content}</Text>
                                {input}
                                <View style={styles.line} />

                                <View style={styles.bottonBox}>
                                    {leftBtn}
                                    {line}
                                    <Text
                                        style={[styles.btn, {color: "#606060"}]}
                                        onStartShouldSetResponder={() => {
                                            return true;
                                        }}
                                        onResponderGrant={this.cancelClick.bind(this)}
                                    >
                                        {this.props.canceText}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </Modal>
                </View>:null
        );
    }
}

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    modalCont: {
        backgroundColor: "#fff",
        width: "70%",
        borderRadius: 10
    },
    title: {
        position: "relative",
        paddingTop: 10,
        paddingBottom: 10
    },
    closeBtn: {
        position: "absolute",
        right: 5,
        top: 10,
        width: 18,
        height: 18
    },
    line: {
        backgroundColor: "#ccc",
        height: 1,
    },
    line2: {
        backgroundColor: "#ccc",
        height: 1,
        transform: [{ scaleY: 0.5 }]
    },
    middleLine: {
        backgroundColor: "#ccc",
        width: 1,
    },
    context: {
        paddingLeft: 30,
        paddingBottom: 30,
        paddingTop: 30,
        paddingRight: 30,
        fontSize: 16,
        color: "#606060"
    },
    bottonBox: {
        flexDirection: "row"
    },
    btn: {
        flex: 1,
        textAlign: "center",
        paddingTop: 15,
        paddingBottom: 15,
        fontSize: 14
    },
    green: {
        color: "#05d178"
    },
    grey: {
        color: "#4A90E2"
    }
});
export default confirm;
